<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学员管理</title>
</head>
<body>
    <!-- 头部 -->
    <div>
        <label for="">姓名:</label>
        <input type="text" id="usernameInput">

        <label for="">学号:</label>
        <input type="text" id="snInput">

        <label for="">电话号码:</label>
        <input type="text" id="telInput">

        <button onclick="queryUser()">查询</button>
    </div>
    <!-- 数据显示 -->
    <div id="userTable">
    </div>

    <script>
        function queryUser() {
            let name = document.getElementById("usernameInput").value;

            if (name.length == 0) {
                name = "";
            } else {
                name = "query=name:" + name;
            }

            fetch("https://study.godoai.com/api/user/?" + name + "&limit=10&offset=0", {
                headers: {
                    "Authorization": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NDU4MDAzNTIsImlhdCI6MTc0NTcxMzk1MiwibmFtZSI6Iue9l-aloCIsInIiOjEsInNuIjoiNTgyNDM1ODYifQ.isplWf_v9qhLfdxoujbYE425-umybzT4yn_C86JnfuI"
                }
            }).then(resp => resp.json()).then(data => {
                // console.log("收到的后端数据是:" + JSON.stringify(data));
                let userTable = document.getElementById("userTable");
                data.forEach(element => {
                    userTable.innerHTML += '<li>' + element.Name + ' 学号:' + element.Sn + '</li>';
                });
            });
        }
    </script>
</body>
</html>